<template>
<div class="container">
  <form>
    <label>
      姓名:
      <input type="name" v-model="name" required/>
    </label>

    <label>
      邮箱:
      <input type="email" v-model="email" required/>
    </label>

    <label>
      电话: 
      <input type="tel" v-model="phone"/>
    </label>

    <label>
      留言:
      <textarea v-model="message" required></textarea>
    </label>

    <button @click="send()">发送</button>
    <p>*注: 请您留下联系方式，便于我与您及时联系！</p>
  </form>
</div>
</template>

<script setup>
import axios from "axios";
import { ref } from 'vue';

// 创建一个 ref 对象来保存表单的值
const name = ref('');
const email = ref('');
const phone = ref('');
const message = ref('');

async function send() {   
  if(name.value == '' || email.value == '' || phone.value == '' || message.value == '')
  {
    return;
  }

  const formData = {
    name: name.value,
    email: email.value,     
    phone: phone.value,  
    message: message.value,
  };

  const url = "http://localhost:9901/api/sendMessage";
  // const res = await axios.post(url, formData);

  axios.post(url, formData)
  .then(response => {
    // 处理成功响应
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });
  // 将 formData 发送到服务器或执行其他操作
}
</script>

<style lang="scss" scoped>
  $primaryColor: #f24804;
  $secondaryColor: #d9fdfb;
  $hoverColor: #fcbaa2;

  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }

  .container {
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
  }

  p{
    text-align: right;
    font-size: xx-small;
    padding: 10px;
  }

  form {
    width: 60%;
    padding: 20px;
    background-color: #f1f4ff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    &:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
  }

  label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
  }

  input,
  textarea {
    width: 100%;
    padding: 8px;
    background-color: #fffffe;
    border: 1px solid #f4f4f4;
    border-radius: 4px;
  }

  textarea {
    height: 150px;
  }

  button {
    width: 100%;
    padding: 10px;
    background-color: $secondaryColor;
    color: $primaryColor;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    &:hover {
      background-color: $hoverColor;
    }
  }
</style>